<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of carousal with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../framework/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--&lt;!&ndash;[if lt IE 9]>-->
    <!--<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>-->
    <!--<![endif]&ndash;&gt;-->
    <style type="text/css">
        .videoList{
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 2px #000 solid;
        }
        .videoList .active img{
            float: left;
            margin-right: 5px;
        }
    </style>
</head>

<body>
<div class="videoList">
<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="../images/videoList.png" width="160" height="9" />
            <img src="../images/videoList2.png" width="160" height="9" />
            <img src="../images/videoList.png" width="160" height="9" />
        </div>
        <div class="item"><img src="../images/videoList2.png" width="160" height="9" /></div>
        <div class="item"><img src="../images/videoList.png" width="160" height="9" /></div>
        <div class="item"><img src="../images/videoList2.png" width="160" height="9" /></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../../framework/carousel/js/bootstrap-carousel.js"></script>


</body>
</html>
